<template>
  <div id='wrap'>
    <h1>Reactive包装注意事项</h1>
    <p>{{ obj.name }}</p>
    <!-- <button @click="count++">改变count++</button> -->
    <button @click="obj.name='小绿'">改变obj.name</button>
    <hr>
    <p>{{ `${child.name}:${parent.name}` }}</p>
    <button @click="child.name='abc'">改变child.name</button>
    <button @click="parent.name='efg'">改变parent.name</button>
    <hr>
    <p>{{ state.count }}</p>
    <button @click="state.count++">改变state.count</button>
    <hr>
    <ul>
        <li v-for="(item,index) in list" :key="index">{{ item }}</li>
    </ul>
    <ul>
        <li v-for="(item,index) in newlist" :key="index">{{ item }}</li>
    </ul>
    <button @click="list[0]++">改变list++</button>
    <button @click="newlist[0]++">改变newlist++</button>
    <hr>
    <!-- <p v-for="(item,index,key) in Object1" :key="index">
        {{ `item:${item};index:${index};key:${key}` }}
    </p> -->
    <!-- <button @click="changeObject1">改变Object1</button> -->
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scusss',
}
</script>

<script lang='ts' setup>
import { ref,reactive } from 'vue'
// const count=reactive(0)
const obj=reactive({
    name:'小明',
    age:18
})
const parent={name:'Parent'}
const child=reactive(Object.create(parent))
console.log(child.name);
child.name='Child'
parent.name='Parent'
console.log(child.name,parent.name);
const state=reactive({count:0})
const list=reactive([1,2,3,4,5,6])
// const newlist=list.map(item=>item*2)
// const newlist=ref(list.map(item=>item*2))
const newlist=reactive(list.map(item=>item*2))
// const Object1=reactive({})
// Object1.name='小明'
// Object1.sex='男'
// Object1.age=18
// function changeObject1(){
//     Object1.name='小绿'
//     Object1.sex='女'
//     Object1.age=16
// }
// const Object2=reactive({next:{}})
// Object2.next2=3
// console.log(Object2.next2);

</script>

<style scoped lang='scss'>

</style>